<template>
	<view class="login">
		<view class="logo">
			<image src="http://blog.bluej.cn/static/img/logo.5f6c094d.jpg" mode="widthFix"></image>
		</view>

		<view class="text">
			欢迎登陆XX博客
		</view>

		<u--form labelWidth="30" labelPosition="left" :model="form" :rules="rules" ref="form">

			<view class="loginFrom" v-show="isLogin">
				<u-form-item leftIcon="phone" prop="phone" ref="item1">
					<u--input v-model="form.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item leftIcon="lock" prop="password" ref="item1">
					<u--input type="password" v-model="form.password" border="none"></u--input>
				</u-form-item>
			</view>

			<view class="registerFrom" v-show="isRegister">
				<u-form-item leftIcon="account" prop="name" ref="item1">
					<u--input type="text" v-model="form.name" border="none" clearable></u--input>
				</u-form-item>
				<u-form-item leftIcon="phone" prop="phone" ref="item1">
					<u--input v-model="form.phone" border="none" clearable></u--input>
				</u-form-item>
				<u-form-item leftIcon="lock" prop="password" ref="item1">
					<u--input type="password" v-model="form.password" border="none" suffixIcon="eye" clearable>
					</u--input>
				</u-form-item>
				<u-form-item leftIcon="lock-fill" prop="spassword" ref="item1">
					<u--input type="password" v-model="form.spassword" border="none" suffixIcon="eye" clearable>
					</u--input>
				</u-form-item>
			</view>
		</u--form>

		<u-button @click="login" class="login-btn" type="primary">登陆</u-button>
		<u-button @click="register" class="login-btn" type="primary">注册</u-button>
	</view>
</template>

<script>
	import {
		login,
		registerUser
	} from '@/config/api.js'
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: "login",
		data() {
			return {
				isLogin:true,
				isRegister:false,
				form: {
					phone: "",
					password: "",
					name: "",
					spassword: ""
				},
				rules: {
					phone: {
						type: 'string',
						required: true,
						length: 11,
						message: "请填写手机号",
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: "请填写6～20位的密码",
						trigger: ['blur', 'change']
					},
					spassword: {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: "请填写6～20位的密码",
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						min: 3,
						max: 10,
						required: true,
						message: "请创建用户名称",
						trigger: ['blur', 'change']
					}
				},
			};
		},
		methods: {
			...mapMutations(['setUser']),
			async login() {
				try {
					// await this.$refs.form.validate();
					console.log(this.form.phone,this.form.password);
					let loginMsg = {};
					loginMsg.phone = this.form.phone;
					loginMsg.password = this.form.password
					console.log(loginMsg);
					const user = await login(loginMsg)
					console.log(user);

					//	如果登陆失败，将异常告知给用户
					if (user.code !== 200) return uni.showToast({
						title: user.msg,
						icon: "error"
					})

					this.setUser(user.data)
					uni.showToast({
						title: "登陆成功"
					})
					
					uni.switchTab({
						url:'/pages/index/index'
					})
						
				} 
				catch (e) {
					console.log(e);
				}
			},
			async register() {
				this.isLogin = false;
				this.isRegister = true;
				let registerMsg = {};
				registerMsg.phone = this.form.phone
				registerMsg.password = this.form.password
				registerMsg.name = this.form.name
				registerMsg.projectId = 168
				const res = await registerUser(registerMsg);
				console.log(res);
				
				this.login();
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 80%;
		height: 65vh;
		margin: 0 auto;
		padding: 30px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;

		.logo {
			width: 104px;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.text {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 600;
			text-align: center;
		}

		::v-deep .uni-input-input {
			width: 87%;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			padding: 0px 10px;
			border-color: rgb(242, 174, 39);
		}

		::v-deep .u-input__content__field-wrapper__field {
			height: 38px;
		}

		.login-btn {
			margin-top: 20px;
		}
	}
</style>
